<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta charset='utf-8'>
<title>轨迹回放</title>
    <link href="<%=basePath%>scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>scripts/boot.js" type="text/javascript"></script> 

<style type="text/css">
body {
	margin: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}

#mapDiv {
	width: 100%;
	height: 100%
}

#tip {
	height: 120px;
	background-color: #fff;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #969696;
	font-size: 16px;
	position:absolute;
	left: 10px;
	bottom: 10px;
	border-radius: 3px;
}
#tip input[type='button'] {
	height: 28px;
	line-height: 28px;
	outline: none;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
	color: #FFF;
	background-color: #0D9BF2;
	border: 0;
	border-radius: 3px;
	margin-top: 8px;
	margin-left: 5px;
	cursor: pointer;
	margin-right: 10px;
}
.circliful { 
    position: relative;  
} 
.circle-text, .circle-info, .circle-text-half, .circle-info-half { 
    width: 100%; 
    position: absolute; 
    text-align: center; 
    display: inline-block; 
} 
.circle-info, .circle-info-half { 
    color: #999; 
} 
.circliful .fa { 
    margin: -10px 3px 0 3px; 
    position: relative; 
    bottom: 4px; 
} 
</style>
</head>
<body>
<table style="width: 100%;height: 100%">
<tr>
<td><div id='mapDiv'></div>
<div id="tip">
<table>
	<tr>
		<td style="text-align: left;width: 220px" colspan="2">
			<b style="font-size:16px" id="clmc"></b>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			 <b>数据时间</b>：<span id="sensor_time"></span><br>
		</td>
	</tr>
	<tr>
		<td >
			 <b>车速</b>：<span id="vehicle_speed"></span>
		</td>
		<td >
			 <b>电池电量</b>：<span id="soc"></span>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="button" value="从头开始" onclick="reStart()">
			<span id="isstart"><input type="button" value="开始" onclick="continueAnimation()"></span>
			<input type="button" id="js" value="加速×1" onclick="jiasu()">
			<input type="button" value="原速" onclick="yuansu()">
		</td>
	</tr>
</table>
	</div>
</td>

</tr>
</table>
	
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>
	<script type="text/javascript">
	function getUrl(name) {
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	    var r = window.location.search.substr(1).match(reg);
	    if (r != null){
	     return unescape(r[2]);
	     }else {
	      return null;
	     }	    
	    }
		var vehicleid = getUrl("vehicleid");
		var ksrq = getUrl("ksrq");
		var jsrq = getUrl("jsrq");
		var gpslng=new Array();
		var gpslat=new Array();
		var jb =1;	
		var map;   //百度地图对象
		var car;   //汽车图标
		var label; //信息标签
		var centerPoint;		
		var timer;     //定时器
		var index = 0; //记录播放到第几个point	
		var vehiclespeed=new Array();
		var batsoc=new Array();
		var point;
		var play_flag;//记录是否已开始回放
		if(vehicleid==null||ksrq==null||jsrq==null){
			mini.alert("获取车辆信息错误");
		}
		var lastdate=new Array();
		mini.mask({
	            el: document.body,
	            cls: 'mini-mask-loading',
	            html: '加载中'
	        });
		$.ajax({
			async: false,
			type : "post",
			url : "vehicle/selectPlayBackByOne.do?vehicleid="+vehicleid+"&&ksrq="+ksrq+"&jsrq="+jsrq,
			datatype: "json",
			success : function(data){
				
				if(data==""){
					mini.alert("查询时间内车辆无轨迹记录，请重新查询！");
				}else{
					list = eval("(" + data + ")");
					if(list.length>0){
						if(list[0].vehiclename!=null&&list[0].vehiclename!=""){
							lastdate = list[0].lastdate;
							gpslng=list[0].gpslng;
							gpslat=list[0].gpslat;
							vehiclespeed=list[0].vehicleSpeed;
							batsoc=list[0].batSoc;
							$("#clmc").html(list[0].vehiclename);
							$("#sensor_time").html(lastdate[0]);
							$("#vehicle_speed").html(vehiclespeed[0]);
							$("#soc").html(batsoc[0]);
							if(lastdate.length<=0){
								mini.alert("查询时间内车辆无轨迹记录，请重新查询！");
								$(".amap-copyright").hide();
							    $(".amap-logo").hide();
							}
						}
					}
					init();
				}
				mini.unmask(document.body);		
			}
		});
		
	
		function init() {
			//初始化地图,选取第一个点为起始点
			map = new BMap.Map("mapDiv");			
			var p=new BMap.Point(gpslng[0], gpslat[0]);
			map.centerAndZoom(p, 15);
			map.enableScrollWheelZoom();
			//label = new BMap.Label("", {offset: new BMap.Size(20,-20)});
			var myIcon = new BMap.Icon( "images/mach_marker_blue.png", new BMap.Size(36,37));
			car = new BMap.Marker(p,{icon:myIcon});
			
			//car.setLabel(label);
			map.addOverlay(car);			
		}
		
		function play() {//回放的方法
			
			point = new BMap.Point(gpslng[index],gpslat[index]);
			if(index > 0) {
				map.addOverlay(new BMap.Polyline([new BMap.Point(gpslng[index-1],gpslat[index-1]), point], {strokeColor: "green", strokeWeight: 3, strokeOpacity: 1}));
				$("#sensor_time").html(lastdate[index]);
				$("#vehicle_speed").html(vehiclespeed[index]);
				$("#soc").html(batsoc[index]);
			}
			car.setPosition(point);
			index++;
			if(index>=gpslng.length){
					window.clearInterval(play_flag);
					mini.alert("回放结束");
				}
			//if(followChk.checked) {
			//	map.panTo(point);
			//}
			//if(index < list.length) {
			//	timer = window.setTimeout("play(" + index + ")", jb*200);
			//} 
			//else {
			//	playBtn.disabled = true;
			//	pauseBtn.disabled = true;
			//	map.panTo(point);
			//}
		}
		function reStart(){//从头回放
			window.clearInterval(play_flag);
			index=0;
			start();
			$("#isstart").html("<input type=\"button\" value=\"暂停\" onclick=\"pauseAnimation()\"> ");
		}
		function start(){//开始回放
			play_flag=setInterval(function(){
			 play()}, 300/jb);
		}
		function pauseAnimation() {//暂停
			window.clearInterval(play_flag);
			$("#isstart").html("<input type=\"button\" value=\"开始\" onclick=\"continueAnimation()\"> ");
		}

		function continueAnimation() {//继续
			window.clearInterval(play_flag);
			 start();
			$("#isstart").html("<input type=\"button\" value=\"暂停\" onclick=\"pauseAnimation()\"> ");
		}
		function jiasu() {
			jb++;
			if(jb>5){
				jb = 1;
			}
			$("#js").attr("value","加速×"+jb);
			window.clearInterval(play_flag);
			$("#isstart").html("<input type=\"button\" value=\"暂停\" onclick=\"pauseAnimation()\"> ");
			start();
		}
		function yuansu(){
			jb = 1;
			$("#js").attr("value","加速×1");
			window.clearInterval(play_flag);
			$("#isstart").html("<input type=\"button\" value=\"暂停\" onclick=\"pauseAnimation()\"> ");
			start();
		}
	</script>
</body>
</html>


